<template>
  <div class="user-wp">
    <header class="userbar userbar-nav">
      <h1 class="title title-white unBorder">个人中心</h1>
    </header>
    <div class="avatar">
      <!-- <van-image round width="1.2rem" height="1.2rem" src="../../assets/img/login/Naruto.png" /> -->
      <img style="width:1.2rem;height:1.2rem;" src="../../assets/img/login/Naruto.png" alt />
      <h6>{{user.name}}</h6>
    </div>
    <section>
      <van-cell icon="contact" border title="个人信息" is-link @click="gotoRouter('/user/userInfo')" />
      <van-cell icon="lock" border title="修改密码" is-link @click="passShow=true" />
      <!-- <van-cell icon="cart-o" border title="购物车" is-link @click="gotoRouter('/user/shopCart')" /> -->
      <van-cell icon="comment-o" border title="我的课程" is-link @click="gotoRouter( '/user/course')" />
      <van-cell icon="replay" border title="退出登录" is-link @click="logoutClk" />
    </section>

    <!-- 修改密码 -->
    <userPass v-if="passShow"></userPass>

    <!-- 退出登录 -->

    <!-- 底部 -->
    <Fixed active="我的" />
  </div>
</template>

<script>
import "@/css/main.css";
import "@/css/login/icon/iconfont.css";
import "@/css/main/iconfont.css";
import "@/css/login/user.css";
import Fixed from "@/components/footerFiexd";
import userPass from "@/components/login/userPass";
import { Dialog } from "vant";
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      passShow: false
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    ...mapActions("login", ["getInfo", "logoutFn", "resetToken"]),
    gotoRouter(val) {
      // console.log(1)
      this.$router.push(val);
    },
    hidePass() {
      this.passShow = false;
    },
    logoutClk() {
      Dialog.confirm({
        message: "确认退出登录吗？"
      })
        .then(() => {
          this.logoutFn(this.token);
          this.resetToken();
          this.$router.push("/");
        })
        .catch(() => {});
    }
  },
  components: {
    Fixed,
    userPass,
    vanDialog: Dialog
  },
  computed: {
    ...mapGetters(["user", "token"])
  }
};
</script>

<style scoped>
</style>